export default function mouseoverColorChange(state, { e, that }) {
  let ePath = [];
  let className;
  let targetName = e.path[0].localName;

  e.path.forEach((element) => {
    if (
      element.className &&
      [
        "button",
        "text",
        "img",
        "fixedBox",
        "freeBox",
        "colBox",
        "colBoxItem",
        "seniorBox",
        "seniorBoxItemList",
        "seniorBoxItem",
        "navMenu",
        "navMenuItem",
        "navMenuSub",
        "carousel",
      ].includes(element.getAttribute("data-type"))
    ) {
      ePath.push({ className: element.className });
    }
  });

  className = ePath[0] ? ePath[0].className : "";

  if (["i"].includes(targetName)) return (state.aimDom = {});

  if (
    className == ""
    // ||
    // className.includes("app") ||
    // className.includes("seniorBoxItemList")
  )
    return (state.aimDom = {});

  //将class加上.
  let dom = document
    .getElementsByClassName("app")[0]
    .querySelector(`.${className.replace(/ /g, ".")}`);
  let aimStyle = window.getComputedStyle(dom);

  //在tree数据树中查找对应的DOM
  state.aimDom = that.$searchDom(
    state.page.tree[that.pageName],
    ePath.reverse(),
    false
  );

  //根据查找的DOM属性生成屏蔽层
  state.colorDomStyle.width = parseInt(aimStyle.width.slice(0, -2)) + "px";
  state.colorDomStyle.height = parseInt(aimStyle.height.slice(0, -2)) + "px";

  // img text button
  if (state.aimDom.faPosition) {
    //自由容器中
    state.colorDomStyle.top = `${dom.offsetTop -
      parseInt(aimStyle.marginTop.slice(0, -2)) +
      state.aimDom.faPosition.top}px`;
    state.colorDomStyle.left = `${dom.offsetLeft -
      parseInt(aimStyle.marginLeft.slice(0, -2)) +
      state.aimDom.faPosition.left}px`;
  } else {
    state.colorDomStyle.top = `${dom.offsetTop -
      parseInt(aimStyle.marginTop.slice(0, -2))}px`;
    state.colorDomStyle.left = `${dom.offsetLeft -
      parseInt(aimStyle.marginLeft.slice(0, -2))}px`;
  }

  state.colorDomStyle.padding = aimStyle.padding;
  state.colorDomStyle.border = aimStyle.borderWidth;
  state.colorDomStyle.margin = aimStyle.margin;
}
